<template>
  <div class="classify" ref="shopHeight">
    <p class="p_tit">购物车</p>
    <dl class="shop_dl" v-for="(item,index) in shopList" :key="item.id">
      <span class="allSpan last_span" @click="btn(item)" :class="{spanActive : item.checked}"></span>
      <dt class="shop_dt">
        <img :src="item.pimg" />
      </dt>
      <dd class="shop_dd">
        <p>{{item.pname}}</p>
        <span class="price">￥{{item.pprice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="asss">小计:{{parseFloat(item.pnum * item.pprice)}}</span>
        <div class="select_num_input">
          <span class="ico_sub" @click="sub(item.pnum, index)">+</span>
          <input class="number_car" type="number" disabled :value="item.pnum" />
          <span class="ico_plus" @click="plus(item.pnum, index)">-</span>
        </div>
      </dd>
      <div class="clear" @click="del(index)">删除</div>
    </dl>
    <div class="price_bottom">
      <span class="allSpan" @click="checkAll(true)" v-show="!checkAllFlag"></span>
      <span class="allSpan_on" @click="checkAll(false)" v-show="checkAllFlag"></span>
      <p class="allprice_op">总计:￥{{allNumPrice}}</p>
      <p @click="payPrice()">结算:({{sumNum}})</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shopList: "",
      clientHeight: "",
      sumNum: 0,
      checkAllFlag: false
    };
  },
  created() {
    this.classifyInfo();
  },
  activated(){
    // this.classifyInfo()      //  数据请求
  },
  mounted() {
    this.clientHeight = document.documentElement.clientHeight;
  },
  watch: {
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  computed: {
    // 计算属性计算总价
    allNumPrice() {
      let total = 0;
      for (let i = 0; i < this.shopList.length; i++) {
        if (this.shopList[i].checked) {
          total +=
            parseInt(this.shopList[i].pnum) * parseInt(this.shopList[i].pprice);
        }
      }
      return total;
    }
  },
  methods: {
    changeFixed(clientHeight) {
      this.$refs.shopHeight.style.height = clientHeight - 50 + "px";
    },
    classifyInfo() {
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
          params: {
            uid: this.$store.state.token
          }
        })
        .then(obj => {
          console.log(obj);
          this.shopList = obj.data.data;
        });
    },
    // 单选
    btn(item) {
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
        this.sumNum++;
      } else {
        item.checked = !item.checked;
        item.checked ? this.sumNum++ : this.sumNum--;
      }
      this.shopList.length == this.sumNum ? this.checkAll(true) : (this.checkAllFlag = false)
    },
    // 全选
    checkAll(flag) {
      this.checkAllFlag = flag;
      var _this = this;
      flag ? (this.sumNum = this.shopList.length) : (this.sumNum = 0);
      for (var i = 0; i < this.shopList.length; i++) {
        if (typeof this.shopList[i].checked == "undefined") {
          _this.$set(this.shopList[i], "checked", _this.checkAllFlag);
        } else {
          this.shopList[i].checked = _this.checkAllFlag;
        }
      }
    },
    // 数量加
    sub(num, index) {
      this.shopList[index].pnum = parseInt(this.shopList[index].pnum) + 1;
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
          params: {
            uid: this.shopList[index].uid,
            pid: this.shopList[index].pid,
            pnum: this.shopList[index].pnum
          }
        })
        .then(num => {
          console.log(num);
        });
    },
    // 数量减
    plus(num, index) {
      if (parseInt(num) <= 1) {
        this.shopList[index].pnum = 1;
      } else {
        this.shopList[index].pnum = parseInt(this.shopList[index].pnum) - 1;
        this.$axios
          .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
            params: {
              uid: this.shopList[index].uid,
              pid: this.shopList[index].pid,
              pnum: this.shopList[index].pnum
            }
          })
          .then(num => {
            console.log(num);
          });
      }
    },
    // 删除
    del(index) {
      console.log(index);
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
          params: {
            uid: this.shopList[index].uid,
            pid: this.shopList[index].pid
          }
        })
        .then(del => {
          console.log(del);
          this.shopList.splice(index, 1);
        });
    },
    // 结算
    payPrice(){
      if(this.sumNum <= 0){
        this.$layer.msg("请先选择商品")
      }else{
        var isList = [];
        for(var i in this.shopList){
          if(this.shopList[i].checked){
            isList.push(this.shopList[i])
          }
        }
        console.log(isList)
      }
    }
  }
};
</script>
<style scoped>
.classify {
  overflow: auto;
}
.p_tit {
  width: 100%;
  line-height: 50px;
  position: fixed;
  text-align: center;
  background: #fff;
}
.shop_dl:nth-of-type(1) {
  padding-top: 50px;
}
.shop_dl {
  display: flex;
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
}
.btn_box {
  width: 10%;
}
.clear {
  width: 15%;
}
.shop_dt {
  width: 20%;
}
.shop_dt img {
  display: block;
  width: 100%;
  height: 100%;
}
.shop_dd {
  width: 57%;
  margin-left: 4%;
}
.shop_dd p {
  width: 100%;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select_num_input {
  width: 100%;
}
.ico_sub,
.ico_plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: left;
  background: deeppink;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.number_car {
  width: 30px;
  float: left;
  margin: 0 15px 0 15px;
  text-align: center;
}
.ico_plus {
  background: deepskyblue;
}
.price {
  color: red;
}
.price_bottom {
  width: 90%;
  margin-left: 5%;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.allSpan,
.allSpan_on {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url(../assets/12.png) no-repeat;
  background-size: 100% 100%;
}
.allSpan_on,.spanActive{
  background: url(../assets/34.png) no-repeat;
  background-size: 100% 100%;
}
.last_span{
  margin: 0 9px 0 9px;
}
</style>
